<template>
	<view class="inv-top-menu-bar">
		<view class="top-menu" ref="manageNav">
			<view class="top-menu-list">
				<view v-for="(item, index) in list" :key="index" :class="item.active ? 't-btn active' : 't-btn'"
					@click="handleClick(item.href)">
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ScrollNav',
		props: ['list'],
		data() {
			return {
				activeIndex: 0
			}
		},
		mounted() {
			// 判断选中项是否超出可视范围
			this.$nextTick(() => {
				var query = uni.createSelectorQuery().in(this)
				let scrollWidthValue = ''
				query.select(".top-menu-list").boundingClientRect((data) => {
					scrollWidthValue = data.width
				}).exec()
				let clientWidthValue = ''
				query.select(".top-menu").boundingClientRect((data) => {
					clientWidthValue = data.width
				}).exec()

				this.activeIndex = this.list.findIndex(item => item.active)
				if (this.activeIndex > 3) {
					// 超出屏幕，自动滚动
					if (scrollWidthValue > clientWidthValue) {
						let left = scrollWidthValue - clientWidthValue
					}
				}
			})
		},
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inv-top-menu-bar {
		background: #ffffff;

		.top-menu {
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 22rpx 33rpx 30rpx;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 12rpx;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;

					&::after {
						content: ' ';
					}
				}
			}
		}
	}
</style>
